<template>
  <div class="page-content">报警列表</div>
</template>
<script setup>
import { ref, onMounted, reactive, h } from "vue";
const search = ref("");
const loading = ref(false);
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const totle = ref(0);
const yuJingDialog = ref(false);
const newId = ref(0);
const is_warning = ref();
const is_warningType = ref([
  // 报警类型
  { value: 0, label: "全部" },
  { value: 1, label: "报警" },
]);
const yuJingData = reactive({
  // 预警图片数据
  pic_path: "", // 图片
  value: "",
  warningTime: "", // 报警时间
  warningLevel: "", // 报警级别
  sx: "", // X位移
  sy: "", // Y位移
  ax: "", // X角度
  ay: "", // Y角度
  az: "", // Z角度
});

onMounted(() => {
  // iot_alarm_logIndex();
  // setTimeout(() => {
  //     iot_alarm_logIndex();
  // }, 1000);
  // newsJingBaoSet
});

const iot_alarm_logIndex = async () => {
  console.log("标靶报警列表");
  loading.value = false;
};
// 分页
const handleSizeChange = (val) => {
  pageSize.value = val;
  iot_alarm_logIndex();
};
// 当前页
const currentPageChange = (val) => {
  currentPage.value = val;
  iot_alarm_logIndex();
};
// 查看预警图片
const handleSeleUserId = async (scope) => {
  // console.log("scope", JSON.parse(JSON.stringify(scope)));
  yuJingDialog.value = true;
  yuJingData.pic_path = scope.pic_path; // 图片
  yuJingData.warningTime = scope.warningTime; // 报警时间
  yuJingData.warningLevel = scope.warningLevel; // 报警级别
  yuJingData.sx = scope.sx; // X位移
  yuJingData.sy = scope.sy; // Y位移
  yuJingData.ax = scope.ax; // X角度
  yuJingData.ay = scope.ay; // Y角度
  yuJingData.az = scope.az; // Z角度
};
</script>

<style lang="less" scoped>
.page-content {
  .sousuo {
    margin-bottom: 0.5rem;
  }
}

:deep(.el-table) {
  --el-table-border-color: #039da5;
  --el-table-text-color: #fff;
  --el-table-header-text-color: #fff;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-row-hover-bg-color: transparent;

  .el-table__cell {
    color: #fff;
  }

  .el-table__header th {
    color: #fff;
  }

  .el-table__row {
    color: #fff;
  }
}

.warning-dialog-content {
  // min-height: 16rem;
  overflow: hidden;
  overflow-y: auto;

  .image-container {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .warning-image {
      max-width: 100%;
      max-height: 70vh;
      object-fit: contain;
      display: block;
    }

    .warning-info-overlay {
      position: absolute;
      top: 80px;
      left: 170px;
      background: rgba(7, 38, 53, 0.8);
      border: 1px solid rgba(0, 250, 255, 0.2);
      border-radius: 8px;
      padding: 15px;
      max-width: 300px;
      z-index: 1;

      .info-item {
        display: flex;
        margin-bottom: 10px;
        color: #fff;
        font-size: 14px;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          width: 80px;
          color: #00faff;
          font-weight: bold;
        }

        .value {
          flex: 1;
        }
      }
    }
  }
}

:deep(.el-dialog) {
  background: #072635;
  border: 1px solid #00faff;

  .el-dialog__title {
    color: #00faff;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #00faff;
  }
}
</style>